<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <style>
      #app {
        margin: 0;
        padding: 0;
        margin: 20px;
      }
      .layui-btn-container{
        width: 200px;
      }
      .layui-btn-container button{
        margin: 20px 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="layui-btn-container">
        <button
          id="playVideo"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe652;</i>播放
        </button>
        <button
          id="pauseVideo"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe651;</i>暂停
        </button>
        <button
          id="speed"
          type="button"
          class="layui-btn layui-btn-radius layui-btn-warm"
        >
          <i class="layui-icon">&#xe65a;</i>快进
        </button>
        <button id="reverse" type="button" class="layui-btn layui-btn-radius">
          <i class="layui-icon">&#xe65b;</i>快退
        </button>
        <button
          type="button"
          id="muted"
          class="layui-btn layui-btn-radius layui-btn-danger"
        >
          <i class="layui-icon">&#xe685;</i>静音
        </button>
        <button
          type="button"
          id="qrcode"
          class="layui-btn layui-btn-radius layui-btn-normal"
        >
          <i class="layui-icon">&#xe663;</i>二维码
        </button>
      </div>
    </div>
  </body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- <script src="http://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js"></script> -->
<script src='./socket.js'></script>
<script src="./layui/layui.all.js"></script>
<script>
  const soc = io("http://192.168.1.5:8080");
  $("#playVideo").click(function () {
    soc.emit("phone", "发送指令");
    soc.on("phone", (data) => {
      //监听浏览器通过msg事件发送的信息
      console.log(data); //你好浏览器
    });
  });
  /* soc.on("msg", (data) => {
    //监听浏览器通过msg事件发送的信息
    console.log(data); //你好浏览器
  });
 */
  $("#pauseVideo").click(function () {
    soc.emit("pauseVideo", "发送指令");
    soc.on("pauseVideo", (data) => {
      //监听浏览器通过msg事件发送的信息
      console.log(data); //你好浏览器
    });
  });

  $("#speed").click(function () {
    soc.emit("speed", "发送指令");
    soc.on("speed", (data) => {
      //监听浏览器通过msg事件发送的信息
      console.log(data); //你好浏览器
    });
  });

  $("#reverse").click(function () {
    soc.emit("reverse", "发送指令");
    soc.on("reverse", (data) => {
      //监听浏览器通过msg事件发送的信息
      console.log(data); //你好浏览器
    });
  });

  $("#muted").click(function () {
    soc.emit("muted", "发送指令");
    soc.on("muted", (data) => {
      //监听浏览器通过msg事件发送的信息
      console.log(data); //你好浏览器
    });
  });

  $("#qrcode").click(function () {
    soc.emit("qrcode", "发送指令");
    soc.on("qrcode", (data) => {
      //监听浏览器通过msg事件发送的信息
      console.log(data); //你好浏览器
    });
  });
</script>
